<template>
  <section class="i-main">
      <div class="container">
          <div class="base-info">
                <div class="player-info">
                    <div>
                        <img :src="default_header"><br>
                        <span>{{ match.player11 }}</span>
                    </div>
                    <div v-if="match.type.length == 2">
                        <img :src="default_header"><br>
                        <span>{{ match.player12 }}</span>
                    </div>
                </div>
                <div class="score-time">
                    <div>
                        <span>{{ match.score1 }}</span>
                        <span>-</span>
                        <span>{{ match.score2 }}</span>
                    </div>
                    <div>
                        <span>{{ match.league + ' ' + match.round }}</span>
                    </div>
                    <div>
                        <span>{{ match.time }}</span>
                    </div>
                </div>
                <div class="player-info">
                    <div>
                        <img :src="default_header"><br>
                        <span>{{ match.player21 }}</span>
                    </div>
                    <div v-if="match.type.length == 2">
                        <img :src="default_header"><br>
                        <span>{{ match.player22 }}</span>
                    </div>
                </div>
          </div>
          <div class="more-info row">
            <div class="col-xs-12 col-md-6 col-md-offset-3" v-for="link in match.links" >
                <a :href="link.url">
                    <span class="fl">{{ link.title }}</span>
                    <span class="fr">{{ '[' + link.name + ']' }}</span>
                </a>
            </div>
          </div>
      </div>
  </section>
</template>

<style scoped lang="scss">
@import '../../../assets/css/variables.scss';
.i-main{ text-align: center; }
.base-info{ 
    @include flex;
    @include flex-align-center;
    @include flex-pack-center;
    margin-top: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid $hl-color;
    > div{ 
        display: inline-block; 
    }
}

.player-info{ 
    width: calc(50% - 60px); max-width: 300px;
    >div{
        display: inline-block; margin: 0 5px;
        img{
           width: 55px; height: 55px; border: 1px solid $img-border-color; border-radius: 50%;
        }
        span{ 
            font-weight: bold; line-height: 30px; 
        }
    }
}

.score-time{ 
    width: 120px;
    div:first-child{
        font-weight: bold; font-size: 20px; line-height: 20px; margin-bottom: 10px;
        span { 
            margin: 0 5px; 
        }
    }
    >div:nth-child(2), >div:nth-child(3){
        font-size: 12px; color: $second-color; line-height: 20px;
    }
}

.more-info{ 
    margin-top: 15px;
    div{
        a{ 
            color: $base-color; display: block; width: 100%; height: 60px; line-height: 60px; border-bottom: 1px solid $border-color;
            span:last-child{ 
                color: $second-color; 
            }
        }
        a:hover span{ 
            color: $hl-color; 
        }
    } 
    div:last-child a{ 
        border-bottom: 0; 
    }
}
</style>

<script>
  import * as default_header from '@/assets/img/default_header.png'

  export default {
    name: 'MatchDetails',
    components: {},
    data () {
      return {
          match: null,
          default_header: default_header
      }
    },
    created(){
        debugger;
        let self = this;
        let urlId = this.$route.params.matchId;
        if(this.$store.getters.match && this.$store.getters.match.id == urlId){
            this.match = this.$store.getters.match;
        }else{
            //ajax with id
            $.ajax({
                url: '/start/match/getMatchById',
                type: 'POST',
                data: {
                'id': urlId || ''
                },
                async: false,
                success(result){
                    self.match =  commons.formatMatch(result);
                },
                error(result){
                    
                }
            });
        }
    }
  }
</script>
